import React, { memo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import styles from "./result.module.scss";
import { Image, InfiniteScroll, PullToRefresh } from "antd-mobile";
import Icon from "../icon";
import { getArticleList } from "@/store/actions/home";

interface Props {
  q: string;
}

const Index: React.FC<Props> = memo(({ q }) => {
  const dispatch = useDispatch(); // 获取 dispatch 函数
  // 从 localStorage 中获取频道 ID
  let { id } =
    JSON.parse(localStorage.getItem("HomeListItem")!) || ({ id: "0" } as any);

  // 从 Redux store 中获取频道对应的文章列表数据
  const { channelArticles } = useSelector((state: any) => state.home);

  // 如果 channelArticles[id] 存在，则取出 pre_timestamp 和 results，否则设置默认值
  const currentChannelArticle = channelArticles[id] ?? {
    pre_timestamp: Date.now() + "", // 时间戳，用于加载更多数据时的参数
    results: [], // 文章列表数据
  };
  const { pre_timestamp, results } = currentChannelArticle;

  // 加载更多数据的函数，调用 getArticleList action 获取更多文章数据
  const loadMore = async () => {
    await dispatch(getArticleList(id, pre_timestamp) as any);
  };

  // 判断是否还有更多数据的条件：
  // 如果 pre_timestamp 为 null，则表示没有更多数据
  const hasMore = pre_timestamp !== null;

  // 下拉刷新文章列表
  const onRefresh = async () => {
    await dispatch(getArticleList(id, Date.now() + "") as any);
  };

  return (
    <div>
      <PullToRefresh onRefresh={onRefresh}>
        <ul className={styles.news}>
          {/* 渲染文章列表 */}
          {results.map((item: any, index: any) => {
            return (
              <li className={styles.hasMorePicture} key={index}>
                <div className={styles.main}>
                  <Link
                    className={styles.title}
                    to={`/articles/${item.art_id}`}
                  >
                    {item.title}
                  </Link>
                  <Link
                    className={item.cover.images ? styles.imgContainer : ""}
                    to={`/articles/${item.art_id}`}
                  >
                    {item.cover.images &&
                      item.cover.images.map((itemSrc: string, index: any) => {
                        return <Image src={itemSrc} alt="" key={index} />;
                      })}
                  </Link>
                </div>
                <div className={styles.secondary}>
                  <Link to={`/articles/${item.art_id}`} className={styles.meta}>
                    <span className={styles.item}>{item.aut_name}</span>
                    <span className={styles.item}>{item.comm_count}评论</span>
                    <span className={styles.item}>
                      {item.collect_count}年内
                    </span>
                  </Link>
                  <Icon
                    type={"iconbtn_channel_close"}
                    className={styles.close}
                  />
                </div>
              </li>
            );
          })}
          {/* 使用 InfiniteScroll 组件实现无限滚动加载更多数据 */}
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </ul>
      </PullToRefresh>
    </div>
  );
});

export default Index;
